<script setup lang="ts">
import BreadCrumbs from '@/components/BreadCrumbs.vue';
import filterList from './components/filter.vue';
</script>
<template>
  <div class="container">
    <!-- 传递id进入页面 -->
    <!-- 面包屑 -->
    <BreadCrumbs class="page" parentName="二级" parentPath="/">
      >三级</BreadCrumbs
    >
    <!--分类筛选-->
    <filterList></filterList>
    <!--最新商品-->
    <div class="new-goods">
      <!--商品导航栏-->
      <div class="ranking clearfix">
        <div style="float: left">
          <a href="/" class="top">最新商品</a>
          <a href="/" class="top">最新人气</a>
          <a href="/" class="top">评论最多</a>
          <a href="/" class="top">
            价格排序
            <span class="icon">
              <i class="top-i">▴</i>
              <i class="top-i">▾</i>
            </span>
          </a>
        </div>
        <div class="right">
          <div class="inp1-parent">
            <input type="checkbox" class="inp" />
            <i>❤️</i>
            <span>仅显示有货商品</span>
          </div>
          <div class="inp-parent">
            <input type="checkbox" class="inp" />
            <i>❤️</i>
            <span>仅显示特惠商品</span>
          </div>
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods">
        <ul class="goods-list">
          <li class="goods-list-item" v-for="item in 20" :key="item">
            <a href="/">
              <img src="../../images/all-item.png" alt="" />
              <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
              <p class="desc">海鲜年货</p>
              <p class="price">¥108.00</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.filter {
  background-color: #fff;
  padding: 25px;
  .filter-item {
    display: flex;
    padding: 10px 0;
  }
  .head {
    width: 80px;
    color: #999;
  }
  .head-item {
    flex: 1;
  }
}
.new-goods {
  background-color: #fff;
  margin-top: 20px;
  padding: 25px;
}
.top {
  width: 82px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  float: left;
  color: #999;
  margin-right: 25px;
  position: relative;
}
.clearfix::after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}
.top-i {
  display: block;
  width: 16px;
  height: 13px;
  margin-top: -6px;
  font-size: 16px;
}
.icon {
  position: absolute;
  right: -1px;
  top: 2px;
  width: 16px;
  height: 30px;
}
.page {
  padding: 30px 10px;
}
.right {
  float: right;
  display: flex;
  .inp {
    width: 16px;
    height: 16px;
    border: 1px solid black;
    outline: none;
    padding: 0;
    border: none;
  }
}
.a-hover:hover {
  color: rgb(39, 186, 155);
}
.goods-list {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .goods-list-item {
    margin-top: 40px;
    width: 278px;
    height: 370px;
    text-align: center;
    padding: 25px 10px 0;
    position: relative;
    img {
      width: 192px;
      height: 192px;
      transition: all 0.5s;
      &:hover {
        transform: scale(1.05);
      }
    }
    .name {
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 20px 40px 0;
    }
    .desc {
      color: #999;
      padding: 20px 40px 0;
    }
    .price {
      color: #cf4444;
      font-size: 18px;
      padding: 20px 40px 0;
    }
  }
}
</style>
